<template>
  <div id="container">地图</div>
</template>

<script>
import { city } from "@/api/user";
export default {
  name: "City",
  components: {},
  props: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  async created() {
    const data = await city(params);
    console.log(data);
  },
  methods: {},
  mounted() {
    var map = new BMapGL.Map("container");
    var point = new BMapGL.Point(116.404, 39.915);
    map.centerAndZoom(point, 15);

    var point = new BMapGL.Point(116.404, 39.915);
    var content = "黑马15套";
    var label = new BMapGL.Label(content, {
      // 创建文本标注
      position: point, // 设置标注的地理位置
      offset: new BMapGL.Size(10, 20), // 设置标注的偏移量
    });
    map.addOverlay(label);
        //给圆点绑定点击事件
   label.addEventListener("click",function(){
    alert('您点击了标注')
   })
    label.setStyle({
      // 设置label的样式
      color: "#000",
      fontSize: "30px",
      border: "2px solid #1E90FF",
      width: "100px",
      height: "80px",
      borderRadius: "50%",
      backgroundColor: "green",
      textAlign: "center",
      paddingTop: "20px",
    });
  },
};
</script>

<style scoped lang="less">
#container {
  height: 100vh;
}
</style>
